<template>
    <div class="search">
        <div class=title>
            <span @click="$router.push('/index/home')"> 返回 </span>
            <span>搜索</span>
        </div>
        
        <div class="searchbox">
            <input type="text" placeholder="请输入商家、商品名称" v-model="searchText">
            <span @click="search">搜索</span>
        </div>

<!-- ***************************************************************************** -->
        <div class="searchContent" v-if="this.searchText != ''">  <!--当搜索框不为空的时候显示  所搜索的商品内容信息-->
            <div class="filter">
                <span>综合排序</span>
                <span>销量最高</span>
                <span>距离最近</span>
                <span>筛选</span>
            </div>

            <div class="storeList" v-for="(item, index) in storeList" :key="index">
                <div class="shop">
                    <!-- <div class="icopic">
                        <img :src="item.picUrl" alt="">
                    </div> -->
                    <div class="shopInfo">
                        <div class="title">
                            <h3> {{item.name}} </h3>
                        </div>
                        <div class="con">
                            <div class="pic">
                                <!-- <img :src="item.discounts2[6].iconUrl" alt=""> -->
                                <img :src="item.picUrl" alt="">
                            </div>
                            <div class=text>
                                <span> {{item.shippingFeeTip}} </span>
                                <span> {{item.averagePriceTip}} </span>
                            </div>
                        </div>
                        <div class="info">
                            <span> {{item.monthSalesTip}} </span>
                            <span> {{item.minPriceTip}} </span>
                            <span> {{item.deliveryTimeTip}} </span>
                            <span>  {{item.distance}} </span>
                        </div>
                        <div class="infoText">
                            <span>店铺工商营业编号:123456789</span>
                            <span>本店支持开发票,开票全额66元起</span>
                        </div>
                        
                    </div>
                </div>

            </div>
        </div>

<!-- ********************************************************************************** -->

        <div class="box" v-else>  <!--当搜素搜框为空的时候，显示 这些内容-->
            <div class=searchHistory>
                <div>历史搜索</div>
                <!-- <span>龙虾</span> -->
                <span v-for="(item, index) in searchArr" :key="index"> {{item}} </span>
            </div>
            <div class="searchFind">
                <div>搜索发现</div>
                <span v-for="(item, index) in searchFind" :key="index"> {{item}} </span>
            </div>
        </div>
    </div>

</template>
<script>
import { shop_search } from '../utils/api';

export default {
  data(){
    return {
       searchText: '',
        searchArr: [],
        searchFind: ['麻辣烫','米线','披萨','蛋糕','汉堡','腊八粥','味多美(温阳路店)','砂锅',],
        storeList:[],
    }
  },
  methods: {
        search() {
            if (this.searchText) {
                this.searchArr.push(this.searchText);
                 shop_search({searchkey:this.searchText}).then((res)=> { // 请求响应所搜索的内容
                    console.log(res.data);
                    this.storeList = res.data.list;
                    // console.log(this.storeList);
                });
                // this.searchText = ""; //这里先不要清空
            } 
           
        },
   
    },
        // mounted() {
        //     shop_search({searchkey:''}).then((res)=> {
        //         console.log(res.data);
        //     });
            
        // },

}
</script>

<style>
/* ------------------------搜索框------------------------------------- */
    .search .title {
        margin-top: 10px;
    }
    .title span {
        display: inline-block;
        margin: 10px 20px 10px 10px;
        font-size: 20px;
    }
    .title span:nth-child(2) {
        color: lightseagreen;
        font-weight: bolder;
    }

    .searchbox {
        display: flex;
        margin-top: 20px;
        height: 40px;
    }
    .searchbox input {
        flex: 1;
        background-color: rgb(236, 231, 231);
        border: none;
        outline: none;
        margin-left: 10px;
        border-radius: 20px;
        text-align: center;

    }
    .searchbox span {
        display: inline-block;
        width: 60px;
        text-align: center;
        line-height: 40px;
        color: rgb(19, 147, 226);
        font-weight: bolder;
    }

/* -----------------------搜索渲染------------------------------------ */
    .searchContent .filter {
        display: flex;
        justify-content: space-around;
        margin-top: 20px;
        font-weight: bolder;
    }
    .searchContent .storeList .shop {
        display: flex;
    }

    .shop .shopInfo {
        flex: 1;
        background-color: rgba(135, 232, 235, 0.555);
        margin-top: 20px;
        overflow: hidden;
    }
    .shopInfo .title {
        margin: 10px 10px;
    }

    .shopInfo .con {
        margin: 10px 10px;
    }
    .shopInfo .con .pic img {
        width: 130px;
        height: 130px;
    }
    .shopInfo .text {
        margin: 10px 0px;
    }
    .text span {
        color: red;
        font-weight: bolder;
        display:inline-block;
     }
     .text span:nth-child(2) {
        margin-left: 20px;
     }
    .shopInfo .info {
        margin: 10px 10px;
        /* margin-top: 10px; */
        display: flex;
        justify-content: space-between;
    }
    .info span {
        background-color: lightsalmon;
    }
    .shopInfo .infoText {
        margin: 10px 10px;
    }
    .shopInfo .infoText span{
        display: block;
        background-color: rgba(202, 149, 33, 0.692);
        margin: 10px 0px;

    }
/* ---------------------------搜索历史 & 搜索发现--------------------------------- */
    .searchHistory {
        margin-top: 10px;
        margin-bottom: 60px;
    }
    .searchHistory div {
        font-size: 18px;
        font-weight: bolder;
        margin-bottom: 10px;
        margin-left: 10px;
    }
    .searchHistory span {
        background-color: rgb(228, 222, 222);
        display: inline-block;
        margin: 10px;
        padding: 8px;
    }

    .searchFind {
        margin-top: 10px;
    }
    .searchFind div {
        font-size: 18px;
        font-weight: bolder;
        margin-bottom: 10px;
        margin-left: 10px;
    }
     .searchFind span {
        background-color: rgb(228, 222, 222);
        display: inline-block;
        margin: 10px;
        padding: 8px;
    }


</style>